<!DOCTYPE html>
<html lang="en">
<head>
	<base href="/xianyan/html/">
	<meta charset="UTF-8">
	<title>闲言轻博客</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../res/layui/css/layui.css">
	<link rel="stylesheet" href="../res/static/css/mian.css">
</head>
<body class="lay-blog">
		<div class="header">
			<div class="header-wrap">
				<h1 class="logo pull-left">
					<a href="index.html">
						<img src="../res/static/images/logo.png" alt="" class="logo-img">
						<img src="../res/static/images/logo-text.png" alt="" class="logo-text">
					</a>
				</h1>
				<form class="layui-form blog-seach pull-left" action="">
					<div class="layui-form-item blog-sewrap">
					    <div class="layui-input-block blog-sebox">
					      <i class="layui-icon layui-icon-search"></i>
					      <input type="text" name="title" lay-verify="title" autocomplete="off"  class="layui-input">
					    </div>
					</div>
				</form>
				<div class="blog-nav pull-right">
					<ul class="layui-nav pull-left">
					  <li class="layui-nav-item layui-this"><a href="index.html">首页</a></li>
					  <li class="layui-nav-item"><a href="message.html">留言</a></li>
					  <li class="layui-nav-item"><a href="about.html">关于</a></li>
					</ul>
					<a href="#" class="personal pull-left">
						<i class="layui-icon layui-icon-username"></i>
					</a>
				</div>
				<div class="mobile-nav pull-right" id="mobile-nav">
					<a href="javascript:;">
						<i class="layui-icon layui-icon-more"></i>
					</a>
				</div>
			</div>
			<ul class="pop-nav" id="pop-nav">
				<li><a href="index.html">首页</a></li>
				<li><a href="message.html">留言</a></li>
				<li><a href="about.html">关于</a></li>
			</ul>
		</div>
		<div class="container-wrap">
			<div class="container">
					<div class="contar-wrap" id="main">
						<h4 class="item-title">
							<p><i class="layui-icon layui-icon-speaker"></i>公告：<span>欢迎来到我的轻博客</span></p>
						</h4>
					</div>
					<div class="item-btn">
						<button id="nextpage" class="layui-btn">下一页</button>
					</div>
			</div>
		</div>
		<div class="footer">
			<p>
				<span>&copy; 2018</span>
				<span><a href="http://www.layui.com" target="_blank">layui.com</a></span> 
				<span>MIT license</span>
			</p>
			<p><span>人生就是一场修行</span></p>
		</div>
		
	<script id="item" type="text/html">
	{{#  layui.each(d.data, function(index, item){ }}
	<div class="item">
		<div class="item-box  layer-photos-demo1 layer-photos-demo">
			<h3><a href="details.html">{{item.title}}</a></h3>
			<h5>发布于：<span>{{item.ctime}}</span></h5>
			<p>{{item.content}}</p>
		</div>
		<div class="comment count">
			<a href="details.html#comment">评论</a>
			<a href="javascript:;" class="like">点赞</a>
		</div>
	</div>
	{{# }) }}
	</script>
		
	<script>
	window.apiurl = "http://127.0.0.1:8080/ins1st-web/api/"
	</script>
	<script src="../layuiadmin/layui/layui.js"></script>
	<script>
	var page = 1;
	var totalPage = 1;
	layui.config({
		base : '../layuiadmin/' //静态资源所在路径
	}).extend({
		jwt: 'modules/jwt'
	}).use(['jwt', 'laytpl'], function() {	
		var $ = layui.$;
		var jwt = layui.jwt;
		var laytpl = layui.laytpl;
		
		// 访问后台
		jwt.ajax({
			url: apiurl + 'list',
			param: {limit: 5},
			success: function(ret) {
				if(ret.success) {
					page = ret.page + 1;
					totalPage = ret.totalPage;
					var tpl = $('#item').html();
					laytpl(tpl).render(ret, function(html){
						$('#main').append(html);
					});
				}
			}
		});
		
		// 加载下一页数据
		$('#nextpage').click(function() {
			if(page > totalPage) {
				if(page == totalPage+1) {
					page++;
					$('#main').append('<div class="more">没有更多数据了</div>');
				}
			} else {
				jwt.ajax({
					url: apiurl + 'list',
					param: {limit: 5, page: page},
					success: function(ret) {
						if(ret.success) {
							page = ret.page + 1;
							totalPage = ret.totalPage;
							var tpl = $('#item').html();
							laytpl(tpl).render(ret, function(html){
								$('#main').append(html);
							});
						}
					}
				});
			}
			
		});
	});
		
	</script>
</body>
</html>